<template>
	<div class="padding-container preview-wrap">
		<div class="title-part">
			<span>{{ $root.lang.control.cert.list.title }}</span>
			<el-button size="mini" type="primary" class="pull-right" @click="showDialog = true">{{ $root.lang.control.cert.list.add }}</el-button>
		</div>
		<el-form ref="tableParams" :inline="true" :model="tableParams" size="small">
      <el-form-item :label="$root.lang.control.cert.list.certNumber">
        <el-input v-model="tableParams.certNumber" ></el-input>
      </el-form-item>
      <el-form-item :label="$root.lang.control.cert.list.certName">
        <el-input v-model="tableParams.name" ></el-input>
      </el-form-item>
      <el-form-item :label="$root.lang.control.cert.list.state">
        <el-select v-model="tableParams.state" :placeholder="$root.lang.control.cert.list.select" clearable>
			    <el-option
			      v-for="item in options"
			      :key="item.value"
			      :label="item.label"
			      :value="item.value">
			    </el-option>
			  </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" size="small" @click="searchAction()">{{ $root.lang.control.cert.list.query }}</el-button>
        <el-button size="small" @click="searchAction(true)">{{ $root.lang.control.cert.list.empty }}</el-button>
      </el-form-item>
    </el-form>
    <el-table
      v-loading="listLoading"
      :empty-text="$root.lang.control.cert.list.noData"
      :data="certList"
      size="small"
      border
      style="width: 100%"
      >
      <el-table-column
        align="center"
        :label="$root.lang.control.cert.list.certNumber">
        <template slot-scope="scope">
          <span></span>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        :label="$root.lang.control.cert.list.certName">
        <template slot-scope="scope">
          <span></span>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        :label="$root.lang.control.cert.list.relation">
        <template slot-scope="scope">
          <span></span>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        :label="$root.lang.control.cert.list.state">
        <template slot-scope="scope">
          <span></span>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        :label="$root.lang.control.cert.list.createTime">
        <template slot-scope="scope">
          <span></span>
        </template>
      </el-table-column>
      <el-table-column
        width="220"
        align="center"
        :label="$root.lang.control.cert.list.operate">
        <template slot-scope="scope">
          <el-button
            size="mini"
            @click="toDetail(scope.$index, scope.row)">{{ $root.lang.control.cert.list.look }}</el-button>
          <el-button
            size="mini"
            type="danger"
            @click="toDelete(scope.$index, scope.row)">{{ $root.lang.control.cert.list.delete }}</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      v-if="tableTotal>0"
      @size-change="sizeChange"
      @current-change="pageChange"
      @prev-click="pageChange"
      @next-click="pageChange"
      :current-page="tableParams.page"
      :page-sizes="[10, 30, 50, 100]"
      :page-size="tableParams.rows"
      layout="total, sizes, prev, pager, next"
      :total="tableTotal">
    </el-pagination>

    <el-dialog ref="dialog" :title="$root.lang.control.cert.create.title" :visible.sync="showDialog" width="50%"  :close-on-click-modal="false" :close-on-press-escape="false">
      <el-form ref="form"  size="small" label-position="right" label-width="110px" >
        <el-form-item :label="$root.lang.control.cert.create.certName">
          <el-input v-model="name"></el-input>
        </el-form-item>
        <el-form-item :label="getLabel('cert')">
          <span>asdfasdfsd</span>
          <a class="download">{{ $root.lang.control.cert.create.download }}</a>
        </el-form-item>
        <el-form-item :label="getLabel('publicKey')">
          <span>asdfasfdsafasdf</span>
          <a class="download">{{ $root.lang.control.cert.create.download }}</a>
        </el-form-item>
       	<el-form-item :label="getLabel('privateKey')">
          <span>asdfassdf</span>
         	<a class="download">{{ $root.lang.control.cert.create.download }}</a>
        </el-form-item>
        <el-form-item>
	        <el-button class="dialog-btn"  type="primary">{{ $root.lang.control.cert.create.confirm }}</el-button>
	      </el-form-item>
      </el-form>
    </el-dialog>
	</div>
</template>

<script>
export default {
	name: 'CertList',
	data() {
		return {
			value:'',
			showDialog:false,
			name:'',
			tableParams:{
				page:1,
				rows:30,
				certNumber:null,
				name:null,
        state:null
			},
			options: [{
        value: 0,
        label: this.$root.lang.control.cert.list.enable
      }, {
        value: 1,
        label: this.$root.lang.control.cert.list.disable
      }],
      listLoading:false,
      certList:[],
      tableTotal:0,
		}
	},
  methods: {
    getLabel(name) {
      return this.$root.lang.control.cert.create[name]+'：'
    },
    sizeChange(val) {
      this.tableParams.page = 1
      this.tableParams.rows = val
      this.fetchData()
    },
    pageChange(val) {
      this.tableParams.page = val
      this.fetchData()
    },
    toDetail(index,row) {
      this.$router.push({ name:'DeviceDetail', params:{ id: row.deviceNumber } })
    },
    toDelete(index,row) {
      this.$confirm(this.$root.lang.confirm.deleteCert, this.$root.lang.confirm.tips, {
        confirmButtonText: this.$root.lang.confirm.deleteImmediately,
        cancelButtonText: this.$root.lang.confirm.noDeletion,
        type: 'warning'
      }).then(() => {
        const loading = this.$loading({
          lock: true,
          text: this.$root.lang.confirm.process,
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        })
        this.request({
          url: '/api/device/delete',
          method: 'post',
          data: {
            deviceNumber: row.deviceNumber
          }
        }).then(response => {
          loading.close()
          this.$message({
            message: this.$root.lang.confirm.operateSuccess+this.$root.lang.confirm.certDelete,
            type: 'success',
            duration: 3 * 1000
          })
          this.searchAction()
        }).catch(error => {
          loading.close()
          this.$message({
            message: error.errmsg,
            type: 'error',
            duration: 3 * 1000
          })
        })
      }).catch(() => {
        
      })
    },
    searchAction(reset) {
      if(reset) {
        this.tableParams = {
          page: 1,
          rows: 30,
          certNumber: null,
          name: null,
          state: null
        }
      } else {
        this.tableParams.page = 1
      }
      this.fetchData()
    },
    fetchData() {
      this.listLoading = true
      this.request({
          url: '/api/cert/search',
          method: 'GET',
          params: this.$root.optionProcess(this.tableParams)
        }).then(response => {
          this.certList = response.result.certList
          this.tableTotal = response.result.total
          this.listLoading = false
        }).catch(error => {
          this.certList = []
          this.listLoading = false
          this.$message({
            message: error.errmsg,
            type: 'error',
            duration: 3 * 1000
          })
      })
    },
  },
  created() {
    this.$root.defaultActive = 'cert'
    this.fetchData();
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
	.padding-container {
		text-align:left;
		.title-part {
			text-align: left;
			font-size:18px;
			padding-bottom:40px;
		}
		.download {
			text-decoration: underline;
			margin-left:15px;
		}
	}
</style>